<template>
	<view class="feed-container">
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="user-view">
				<view class="info">
					<u-image width="70rpx" height="70rpx" :src="item.headImgUrl" shape="circle"></u-image>
					<text class="name">
						{{item.operatorName}}
					</text>
				</view>
			</view>
			<text class="content">
				{{item.content}}
			</text>
			<multi-media-view :mediaType="item.mediaType" :resourceUrls="item.resourceUrl | resourceUrlFilter" class="multi-media-view"></multi-media-view>

			<view class="more-view">
				<text class="time">
					{{$u.timeFrom(item.created, 'yyyy年mm月dd日 hh:MM')}}
				</text>
				<view v-if="item.operatorId === userId" class="time" @click="delClick(item, index)">
					删除
				</view>
			</view>
		</view>
		<u-loadmore v-if="!emptyShow" :status="status" />
		<u-empty class="noContent" v-if="emptyShow" text="暂时没有宝宝的动态哦～"  mode="list"></u-empty>
		<u-action-sheet :list="actionList" v-model="show" @click="moreOptionclick"></u-action-sheet>
		<comments ref="comments"></comments>
	</view>
</template>

<script>
	import {
		recordPageByAreaId,
		recordPageByPlanId,
		getClasscircle,
		deleteLiveRecord
	} from '../../api/feed.js'
	import Comments from '@/components/comments.vue'
	import {
		mapState,
	} from 'vuex';
	import MultiMediaView from '@/components/multi-media-view.vue'
	import pageMixin from '@/mixins/page.js'
	export default {
		name: 'Feed',
		mixins: [pageMixin],
		components: {
			MultiMediaView,
			Comments
		},
		props: {
			coursePlanId: {
				type: String,
				default () {
					return ''
				}
			},
			category: {
				type: String,
				default () {
					return ''
				}
			},
			isCourse: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		filters: {
			resourceUrlFilter (value) {
				if (!value) {
					return []
				}
				return value.split('|');
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
				
				tchInfo: state => state.user.tchInfo,
				parentInfo: state => state.user.parentInfo,
			}),
		},
		data() {
			return {
				actionList: [
					{
						text: '删除'
					},
					{
						text: '点赞',
					},{
						text: '评论' 
					},
				],
				show: false,
				
				userId: '',
			}
		},
		created() {
			if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
				console.log(this.tchInfo);
				this.userId = this.tchInfo.staff.id;
			} else {
				console.log(this.parentInfo);
				this.userId = this.parentInfo?.id;
			}
			this.getList(this.page);
		},
		methods: {
			refresh() {
				this.page = -1;
				this.getList(this.page);
			},
			getList(page) {
				console.log(page);
				this.emptyShow = false
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					const isCourse = this.$props.isCourse;
					const coursePlanId = this.$props.coursePlanId;
					if (isCourse) {
						recordPageByPlanId(coursePlanId, page + 1, 20).then(res => {
							console.log(res);
							this.setData(res);
							uni.stopPullDownRefresh();
						})
					} else {
						recordPageByAreaId(page + 1, 20).then(res => {
							console.log(res);
							this.setData(res);
							uni.stopPullDownRefresh();
						}).catch(err => {
							uni.stopPullDownRefresh();
						})
					}
				} else {
					getClasscircle(page + 1, 20).then(res => {
						console.log(res);
						this.setData(res);
					})
				}
			},
			
			moreClick(item, index) {
				console.log(index);
				// this.show = true;
				// this.item = item;
				// this.index = index;
			},
			
			moreOptionclick(index) {
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				console.log(index);
				if (index === 1) {
					this.$refs.comments.open(this.item.id, 66);
				}
			},
			
			delClick(item, index) {
				const that = this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除这条班级圈？',
					showCancel: true,
				    success: function (res) {
						console.log(res);
				        if (res.confirm) {
				            that.delLiveRecord(item.id);
				        }
				    }
				});
			},
			
			delLiveRecord(recordId) {
				deleteLiveRecord(recordId).then(res => {
					this.refresh();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.feed-container{
		background-color: $app-page-bg-color;
	}
	
	.item {
		display: flex;
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;

		.user-view {
			display: flex;
			flex-direction: row;
			align-items: center;

			.info {
				flex-grow: 1;
				display: flex;
				flex-direction: row;
				align-items: center;

				.name {
					margin-left: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 65rpx;
				}
			}

			.more {}
		}

		.content {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			margin-top: 20rpx;
		}

		.multi-media-view {
			margin-top: 24rpx;
		}

		.more-view{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.time {
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 36rpx;
			}
			
		}


	}
</style>
